<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置接口自动获取节点数据')}`">{{ $t('配置接口自动获取节点数据') }}</t>
            <li>
                通过<span class="d-code">request-config</span>接口请求配置对象，可实现自动请求并渲染树节点
            </li>
            <li>
                组件内部会监听<span class="s-code">request-config</span>的变化，
                如果<span class="s-code">request-config</span>发生改变，那么将会自动触发接口的请求，从而获取新的数据
            </li>
        </template>
        <sib-tree filterable :request-config="requestConfig" style="height: 300px;"></sib-tree>
    </example>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const requestConfig = reactive({
            url: '/api/tree-data.json',
            method: 'get',
            params: {},
        });

        return {
            requestConfig,
            templateString: `<template>
    <div class="example-box">
        <sib-tree filterable :request-config="requestConfig"></sib-tree>
    </div>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const requestConfig = reactive({
            url: '/api/tree-data.json',
            method: 'get',
            params: {},
        });

        return { requestConfig };
    },
};
<\/script>`,
        };
    },
};
</script>
